<!DOCTYPE html>
<html>
	<head>
		<title>Demo - Papa Parse</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, maximum-scale=1.0">
		<meta name="theme-color" content="#ffffff">
		<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
		<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Arvo|Source+Sans+Pro:400,400italic,700|Lato:300,400">
		<link rel="stylesheet" href="/resources/css/unsemantic.css">
		<link rel="stylesheet" href="/resources/css/common.css">
		<link rel="stylesheet" href="/resources/css/demo.css">
		<script src="/resources/js/jquery.min.js"></script>
		<script src="/resources/js/common.js"></script>
		<script src="https://unpkg.com/papaparse@latest/papaparse.min.js"></script>
		<script src="/resources/js/demo.js"></script>
	</head>
	<body>

		<main>
			<header>
				<div class="grid-container">
					<div class="grid-40 mobile-grid-50">
						<div class="links">
							<a href="/demo">
								<i class="fa fa-magic fa-lg"></i> Demo
							</a>
							<a href="/docs">
								<i class="fa fa-book fa-lg"></i> Docs
							</a>
							<a href="/faq">
								<i class="fa fa-question fa-lg"></i> FAQ
							</a>
						</div>
					</div>
					<div class="grid-20 hide-on-mobile text-center">
						<a href="/" class="text-logo">Papa Parse 5</a>
					</div>
					<div class="grid-40 mobile-grid-50 text-right">
						<div class="links">
							<a href="https://github.com/mholt/PapaParse">
								<i class="fa fa-github fa-lg"></i> GitHub
							</a>
							<a href="http://stackoverflow.com/questions/tagged/papaparse">
								<i class="fa fa-stack-overflow fa-lg"></i> Help
							</a>
						</div>
					</div>
				</div>
			</header>


			<h1>Choose a Demo</h1>

			<div class="tabs">
				<div class="tab active" id="tab-string">String</div>
				<div class="tab" id="tab-local">Local File(s)</div>
				<div class="tab" id="tab-remote">Remote File</div>
				<div class="tab" id="tab-unparse">JSON to CSV</div>
			</div>

			<div class="grid-container">

				<div class="grid-25">
					<label>
						<input type="checkbox" id="stream"> Stream
						<dfn>Results are delivered row by row to a step function. Use with large inputs that would crash the browser.</dfn>
					</label>

					<label>
						<input type="checkbox" id="worker"> Worker thread
						<dfn>Uses a separate thread so the web page doesn't lock up.</dfn>
					</label>

					<label>
						<input type="checkbox" id="header"> Header row
						<dfn>Keys data by field name rather than an array.</dfn>
					</label>

					<label>
						<input type="checkbox" id="dynamicTyping"> Dynamic typing
						<dfn>Turns numeric data into numbers and true/false into booleans.</dfn>
					</label>

					<label>
						<input type="checkbox" id="skipEmptyLines"> Skip empty lines
						<dfn>By default, empty lines are parsed; check to skip.</dfn>
					</label>

				</div>

				<div class="grid-75 grid-parent">

					<div class="grid-33 push-66">
						<label>
							Delimiter:<input type="text" size="4" maxlength="1" placeholder="auto" id="delimiter"><a href="javascript:" id="insert-tab">tab</a>
							<dfn>The delimiting character. Usually comma or tab. Default is comma.</dfn>
						</label>

						<label>
							Preview:<input type="number" min="0" max="1000" placeholder="0" id="preview">
							<dfn>If &gt; 0, stops parsing after this many rows.</dfn>
						</label>

						<label>
							Encoding:<input type="text" id="encoding" placeholder="default" size="7">
							<dfn>Only applies when reading local files. Default is specified by the browser (usually UTF-8).</dfn>
						</label>

						<label>
							Comment char:<input type="text" size="7" maxlength="10" placeholder="default" id="comments">
							<dfn>If specified, skips lines starting with this string.</dfn>
						</label>
					</div>

					<div class="grid-66 pull-33">
						<div class="input-area" id="input-string">
							<textarea id="input" placeholder="String input">Column 1,Column 2,Column 3,Column 4
1-1,1-2,1-3,1-4
2-1,2-2,2-3,2-4
3-1,3-2,3-3,3-4
4,5,6,7</textarea>
						</div>
						<div class="input-area" id="input-local">
							
							<div class="text-center">
								Choose one or more delimited text files for Papa to parse.
							</div>

							<input type="file" id="files" multiple>
							
							Sample files:

							<ul>
								<li>
									<a href="/resources/files/normal.csv" id="local-normal-file">Normal file</a>
								</li>
								<li>
									<a href="/resources/files/big.csv" id="local-large-file">Large file</a>
								</li>
								<li>
									<a href="/resources/files/malformed.tsv" id="local-malformed-file">Malformed file</a>
								</li>
							</ul>
						</div>
						<div class="input-area" id="input-remote">
							
							<div class="text-center">
								Type the URL of the file to be downloaded and parsed.
								<br>
								<small>(cross-origin requests require Access-Control-Allow-Origin header)</small>
							</div>

							<input type="text" id="url" placeholder="URL">

							Sample files:

							<ul>
								<li>
									<a href="javascript:" id="remote-normal-file">Normal file</a>
								</li>
								<li>
									<a href="javascript:" id="remote-large-file">Large file</a>
								</li>
								<li>
									<a href="javascript:" id="remote-malformed-file">Malformed file</a>
								</li>
							</ul>
						</div>
						<div class="input-area" id="input-unparse">
							<textarea id="json" placeholder="JSON string">[
	{
	    "Column 1": "1-1",
	    "Column 2": "1-2",
	    "Column 3": "1-3",
	    "Column 4": "1-4"
	},
	{
	    "Column 1": "2-1",
	    "Column 2": "2-2",
	    "Column 3": "2-3",
	    "Column 4": "2-4"
	},
	{
	    "Column 1": "3-1",
	    "Column 2": "3-2",
	    "Column 3": "3-3",
	    "Column 4": "3-4"
	},
	{
	    "Column 1": 4,
	    "Column 2": 5,
	    "Column 3": 6,
	    "Column 4": 7
	}
]</textarea>
						</div>
						<div class="text-center">
							<div class="see-results">
								Results will appear in the console of your browser's inspector tools
							</div>
							<button id="submit" class="green">Parse</button>
						</div>
					</div>
				</div>
			</div>

		</main>



		<footer>
			<!--<div class="footer-top">
				<h3>Make Your Papa Proud</h3>
				<h4><a href="https://github.com/mholt/PapaParse">Star</a> and <a href="https://github.com/mholt/PapaParse/blob/gh-pages/resources/js/lovers.js">shout</a> if you love #PapaParse</h4>
			</div>-->
			<div class="footer-main">
				<div class="grid-container">
					<div class="grid-40 text-center">
						<div class="logo">P</div>
						<br><br>
						Papa Parse by <a href="https://twitter.com/mholt6">Matt Holt</a>
						<br>
						&copy; 2013-2019
					</div>
					<div class="grid-15 mobile-grid-50 links">
						<h5>Learn</h5>
						<a href="/demo">Demo</a>
						<a href="/docs">Documentation</a>
						<a href="/faq">FAQ</a>
					</div>
					<div class="grid-15 mobile-grid-50 links">
						<h5>Project</h5>
						<a href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=S6VTL9FQ6L8EN&item_name=PapaParse&currency_code=EUR&source=url">Donate</a>
						<a href="https://github.com/mholt/PapaParse">GitHub</a>
						<a href="https://twitter.com/search?q=%23PapaParse">Share</a>
					</div>
					<div class="clear hide-on-desktop"></div>
					<div class="grid-15 mobile-grid-50 links">
						<h5>Download</h5>
						<a href="https://github.com/mholt/PapaParse/archive/master.zip">Latest (master)</a>
						<hr>
						<a href="https://github.com/mholt/PapaParse/blob/master/papaparse.min.js">Lil' Papa</a>
						<a href="https://github.com/mholt/PapaParse/blob/master/papaparse.js">Fat Papa</a>
					</div>
					<div class="grid-15 mobile-grid-50 links">
						<h5>Community</h5>
						<a href="https://twitter.com/search?q=%23PapaParse">Twitter</a>
						<a href="http://stackoverflow.com/questions/tagged/papaparse">Stack Overflow</a>
					</div>
				</div>
			</div>
		</footer>
	</body>
</html>
